<template>
  <div class="content">
    <!-- 顶部导航 -->
    <van-nav-bar title="找家政服务" left-arrow @click-left="$router.back()" />

    <!-- 中间部分 -->
    <div class="fromCard">
      <van-cell class="cell">
        <span slot="title" class="cell-text">找家政</span>
        <i slot="icon" class="cell-icon"></i>
      </van-cell>
      <div class="van-hairline--bottom"></div>

      <!-- 表单 -->
      <van-form v-model="formData" @submit="onSubmit">
        <!-- 需求岗位 -->
        <van-field
          name="demandPosition"
          label="需求岗位"
          :required="true"
          :rules="[{ validator, message: '需求岗位为必选' }]"
        >
          <template #input>
            <van-row type="flex" justify="end" gutter="5" style="width: 100%">
              <div v-for="(obj, index) in formData.islabelList" :key="index">
                <van-col v-if="obj.islabel" class="label-item">
                  <van-tag
                    plain
                    round
                    size="medium"
                    type="primary"
                    class="label"
                    @click="isSelectLabel(index)"
                    >{{ obj.val }}</van-tag
                  >
                </van-col>
              </div>
            </van-row>
          </template>
        </van-field>
        <van-row gutter="20" class="label-box">
          <van-col
            v-for="(obj, index) in labelList"
            :key="index"
            class="label-item"
          >
            <van-tag
              plain
              round
              size="medium"
              :color="obj.islabel ? '#979191' : ''"
              type="primary"
              class="label"
              @click="obj.islabel ? $toast('不能重复添加') : isLabel(index)"
              >{{ obj.val }}</van-tag
            >
          </van-col>
        </van-row>
        <div class="van-hairline--bottom"></div>

        <!-- 手机号码 -->
        <van-field
          v-model="formData.tel"
          name="手机号"
          :required="true"
          type="tel"
          label="手机号码："
          placeholder="请输入手机号码"
          input-align="right"
          :rules="telRules"
        />
        <div class="van-hairline--bottom"></div>
        <!-- 年龄 -->
        <van-field
          name="age"
          :value="formData.ageValue"
          label="年龄："
          placeholder="请选择"
          input-align="right"
          @click="ageShowPicker = true"
        />
        <van-popup v-model="ageShowPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="ageColumns"
            @confirm="ageBtnOk"
            @cancel="ageShowPicker = false"
          />
        </van-popup>
        <div class="van-hairline--bottom"></div>
        <!-- 薪资 -->
        <van-field
          name="salary"
          :value="formData.salaryValue"
          label="薪资："
          placeholder="请选择"
          input-align="right"
          @click="salaryShowPicker = true"
        />
        <van-popup v-model="salaryShowPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="salaryColumns"
            @confirm="salaryBtnOk"
            @cancel="salaryShowPicker = false"
          />
        </van-popup>
        <div class="van-hairline--bottom"></div>
        <!-- 住家 -->
        <van-row class="row" type="flex" justify="space-between">
          <van-col>
            <span class="van-col-span">住家：</span>
          </van-col>
          <van-col>
            <van-tag
              plain
              round
              size="medium"
              type="primary"
              :color="formData.home ? '#979191' : ''"
              class="isHome-label"
              @click="formData.home = false"
              >不住</van-tag
            >
            <van-tag
              plain
              round
              size="medium"
              type="primary"
              :color="formData.home ? '' : '#979191'"
              class="isHome-label"
              @click="formData.home = true"
              >住家</van-tag
            >
          </van-col>
        </van-row>
        <div class="van-hairline--bottom"></div>
        <!-- 联系人 -->
        <van-field
          v-model="formData.contacts"
          type="text"
          label="联系人："
          placeholder="请输入联系人"
          input-align="right"
        />
        <div class="van-hairline--bottom"></div>
        <!-- 籍贯要求 -->
        <van-field
          v-model="formData.NativePlace"
          type="text"
          label="籍贯要求："
          placeholder="请输入籍贯要求"
          input-align="right"
        />
        <div class="van-hairline--bottom"></div>
        <!-- 工作地点 -->
        <van-field
          v-model="formData.PlaceWork"
          type="text"
          label="工作地点："
          placeholder="请输入工作地点"
          input-align="right"
        />
        <div class="van-hairline--bottom"></div>
        <!-- 底部按钮 -->
        <van-button type="primary" block color="#3F51B5" class="button"
          >提交资料</van-button
        >
      </van-form>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      formData: {
        tel: "", // 手机号
        contacts: "", // 联系人
        NativePlace: "", // 籍贯
        PlaceWork: "", // 工作地点
        ageValue: "", // 年龄
        salaryValue: "", // 薪资
        home: true, // 是否住家
        islabelList: [], // 已选择标签数组
      },

      checkboxGroup: [],
      // 校验规则
      telRules: [
        { required: true, message: "手机号不能为空", trigger: "onBlur" },
        {
          validator: (value) => {
            return /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(
              value
            );
          },
          message: "手机号格式不对",
          trigger: "onBlur",
        },
      ],
      // 年龄数组
      ageColumns: ["不限", "20-30", "31-40", "41-50"],
      // 薪资数组
      salaryColumns: [
        "面谈",
        "6000-8000",
        "8000-10000",
        "10000-12000",
        "12000-14000",
      ],
      // 标签数组
      labelList: [
        { val: "月嫂", islabel: false },
        { val: "育婴师", islabel: false },
        { val: "保洁/清", islabel: false },
        { val: "保姆", islabel: false },
        { val: "早教/拖", islabel: false },
        { val: "养老/陪", islabel: false },
        { val: "家装/搬", islabel: false },
        { val: "产康师", islabel: false },
      ],
      // 年龄选择框
      ageShowPicker: false,
      // 薪资选择框
      salaryShowPicker: false,
    };
  },
  methods: {
    // 年龄选择框确认按钮
    ageBtnOk(value) {
      this.formData.ageValue = value;
      this.ageShowPicker = false;
    },
    // 薪资选择框确认按钮
    salaryBtnOk(value) {
      this.formData.salaryValue = value;
      this.salaryShowPicker = false;
    },
    // 标签点击事件
    isLabel(index) {
      if (this.formData.islabelList.length >= 5) {
        return this.$toast("最多只能添加5个");
      }
      this.labelList[index].islabel = true;
      this.formData.islabelList.push(this.labelList[index]);
    },
    // 已选择的标签
    isSelectLabel(index) {
      this.formData.islabelList[index].islabel = false;
      this.formData.islabelList.splice(index, 1);
    },
    // 需求岗位校验函数
    validator(val) {
      if (!this.formData.islabelList.length) {
        return false;
      }
    },
    // 提交表单
    onSubmit() {
      this.$toast.success("表单提交成功");
      // 重置表单
      this.formData = {
        tel: "", // 手机号
        contacts: "", // 联系人
        NativePlace: "", // 籍贯
        PlaceWork: "", // 工作地点
        ageValue: "", // 年龄
        salaryValue: "", // 薪资
        home: true, // 是否住家
        islabelList: [], // 已选择标签数组
      };
      // 重写数据
      this.labelList = [
        { val: "月嫂", islabel: false },
        { val: "育婴师", islabel: false },
        { val: "保洁/清", islabel: false },
        { val: "保姆", islabel: false },
        { val: "早教/拖", islabel: false },
        { val: "养老/陪", islabel: false },
        { val: "家装/搬", islabel: false },
        { val: "产康师", islabel: false },
      ];
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  height: 100vh;
  background-color: #f8f8f8;
  /deep/.van-nav-bar__content {
    height: 150px;
    width: 100%;
    background-color: #3f51b5;
    padding-bottom: 54px;
    .van-nav-bar__left {
      height: 126px;
      margin-top: 10px;
      font-size: 32px;
      .van-nav-bar__arrow {
        color: #fff;
      }
    }
    .van-nav-bar__title {
      margin-left: 80px;
      margin-bottom: 8px;
      color: #fff;
      font-size: 32px;
      font-weight: 700;
    }
  }
  /deep/.fromCard {
    position: absolute;
    left: 24px;
    top: 126px;
    z-index: 1;
    width: 704px;
    border-radius: 10px;
    background-color: #fff;
    .cell {
      border-bottom: 2px solid #f0eeee;
      .cell-text {
        font-size: 28px;
        margin-left: 20px;
        color: #101010;
        font-weight: 700;
      }
      .cell-icon {
        width: 8px;
        height: 28px;
        background-color: #3f51b5;
        margin-top: 8px;
      }
    }
    .van-cell__title {
      font-size: 26px;
      color: #101010;
      flex: 0 0 180px;
      // background-color: orange;
    }

    .label-box {
      margin: 10px 36px 30px;
      .label-item {
        padding: 0px 30px 0 0 !important;
      }
      .label {
        margin-bottom: 10px;
        padding: 5px 20px;
      }
    }
    .van-hairline--bottom {
      border-bottom: 1px solid #f0eeee;
    }
    // 表单项
    .row {
      padding: 0 30px;
      height: 100px;
      line-height: 100px;
      font-size: 26px;
      color: #101010;
    }
    .van-icon {
      margin-left: 10px;
      color: #7b7777;
    }
    .isHome-label {
      margin-left: 10px;
    }
  }

  .button {
    position: fixed;
    bottom: 0;
    z-index: 1;
  }
}
</style>